import React, { Component, Suspense } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import PageLoading from "@/components/PageLoading";
import { connect } from 'dva';
import { Card, Tabs, Button, Form, Modal, Input, Icon, message, Tooltip } from 'antd';
import styles from './index.less';
import AgentList from './list';
import EditPaneModal from "./editPaneModal";
import { postAgentCategoryAdd, postAgentCategoryEdit, getAgentCategoryList, getAgentCategoryDel } from "@/services/assistantCenter";

const { TabPane } = Tabs;
let tagCount, sortCount;

class personalization extends Component {
	constructor(props) {
		super(props);
		this.state = {
			categoryId: "All",
			agentCategroyList: []
		};
	}

	componentDidMount() {
		this.agentCategroyList()
	}

	agentCategroyList = async () => {
		let res = await getAgentCategoryList();
		console.log(res);
		this.setState({ agentCategroyList: res, }, () => {
			if (this.AgentRefAll) {
				this.AgentRefAll.getList('All', 1)
			}
		})
	}

	onChangeTab = key => {
		this.setState({ categoryId: key }, () => {
			if (this["AgentRef"+key]) {
				this["AgentRef"+key].getList(key, 1)
			}
		});
	}

	addManage = () => {
		this.EditPaneModalRef.openModal()
	}

	setCategory = async (name, categoryId) => {
		const { dispatch, match: { params: { id }, }, } = this.props;
		let obj = { name, rootCategoryId: id };
		let res = { code: -1, data: false, msg: '操作成功' };
		if (categoryId) {
			obj.id = categoryId;
			res = await postAgentCategoryEdit(obj)
		} else {
			res = await postAgentCategoryAdd(obj);
		};
		if (res.code === 0) {
			message.success('操作成功')
			this.EditPaneModalRef.closeModal()
		}
	}

	editManage = () => {
		const { agentCategroyList, categoryId } = this.state;
		let row = agentCategroyList.filter(item => item.id == categoryId);
		this.EditPaneModalRef.openModal(row[0]);
	}

	delManage = async () => {
		const { agentCategroyList, categoryId } = this.state;
		let row = agentCategroyList.filter(item => item.id == categoryId);
		let res = await getAgentCategoryDel({ id: row[0]?.id })
		if (res.code === 0) {
			message.success("操作成功");
			this.setState({ categoryId: "All" }, () => this.agentCategroyList())
		}
	}

	render() {
		const { currentUser } = this.props;
		const { agentCategroyList, categoryId } = this.state;
		const operations = (
			<span style={{ display: 'flex', alignItems: 'center', gap: '12px', paddingRight: 16 }}>
				<Tooltip placement="bottom" title="新增分类">
					<Button icon='plus' style={{ margin: '12px 0' }} onClick={this.addManage}></Button>
				</Tooltip>
				{categoryId !== 'All' && categoryId !== 'Admin' ? (
					<>
						<Tooltip placement="bottom" title="编辑分类名称">
							<Button icon='form' style={{ margin: '12px 0' }} onClick={this.editManage}></Button>
						</Tooltip>
						<Tooltip placement="bottom" title="删除分类">
							<Button icon='delete' style={{ margin: '12px 0' }} onClick={this.delManage}></Button>
						</Tooltip>
					</>
				) : null}
			</span>
		);

		return (
			<Suspense fallback={<PageLoading />}>
				<PageHeaderWrapper>
					<Card bordered={false} bodyStyle={{ padding: 0 }} className={styles.CardCenter} /** style={{ background: "unset" }} */ >
						<Tabs tabBarExtraContent={operations} tabBarStyle={{ paddingLeft: 24, height: '52px' }} onChange={this.onChangeTab}>
							<TabPane tab="全部" key="All">
								<AgentList onRef={ref => this.AgentRefAll = ref} categoryKey={"All"} categoryId={undefined} type={undefined} categoryList={agentCategroyList} />
							</TabPane>
							{currentUser.tenantId == '1' ? null : (
								<TabPane tab="供应商分享" key="Admin">
									<AgentList onRef={ref => this.AgentRefAdmin = ref} categoryKey={"Admin"} categoryId={undefined} type="1" categoryList={agentCategroyList} />
								</TabPane>
							)}
							{agentCategroyList && agentCategroyList.length > 0 ? agentCategroyList.map((category, index) => {
								return (
									<TabPane tab={category.name} key={category.id}>
										<AgentList onRef={ref => this["AgentRef"+category.id] = ref} categoryKey={category.id} categoryId={category.id} type="0" categoryList={agentCategroyList} />
									</TabPane>
								)
							}) : null}
						</Tabs>
					</Card>

					<EditPaneModal onRef={ref => this.EditPaneModalRef = ref} setCategory={this.setCategory} getTabList={this.agentCategroyList} />
				</PageHeaderWrapper>
			</Suspense>
		);
	}
}

export default connect(({ user }) => ({
	currentUser: user.currentUser,
}))(Form.create()(personalization));
